<template>
    <div class="comment_container" v-cloak>
        <p>发表评论</p>
        <hr>
        <!-- 设置原生属性，例如 :attr="{ maxlength: 10 }" -->
        <mt-field placeholder="请自我BB" type="textarea" rows="4" v-model.lazy="comment" :attr='{maxlength: 20}'></mt-field>
        <mt-button type='primary' size='large' @click="send">发表</mt-button>
        <!-- 列表 -->
        <div class="list">
            <div class="list_i" v-for='(item,i) in list' :key='i'>
                <p>第{{ list.length - i }}楼 <span>用户: {{ item.user_name }}</span> <span>发表时间: {{ item.add_time | dateFormat }}</span></p>
                <p> {{ item.comment }} </p>
            </div>
        </div>
        <mt-button type='primary' size='large' plain @click="addComment" >加载更多</mt-button>
    </div>
</template>

<script>
// 评论组件
    import { Toast } from "mint-ui";
    export default {
        props: ["id"],
        data() {
            return {
                comment: '',
                list: [
                {
                    user_name: "张三",
                    add_time: Date.now(),
                    comment: "what?"
                },
                {
                    user_name: "张三",
                    add_time: Date.now(),
                    comment: "what?"
                },
                {
                    user_name: "张三",
                    add_time: Date.now(),
                    comment: "what?"
                }
            ]
            }
        },
        methods: {
            send() {
                if(!this.comment) return Toast('评论不能为空 !')
                this.receive(this.comment);
                Toast('发表成功 !')
                this.comment = "";
            },
            addComment() {
                this.add();
            },
            receive(comment) {
                var obj = {
                    user_name: "张三",
                    add_time: Date.now(),
                    comment
                };
                this.list.unshift(obj);
            },
            add() {
                var obj = {
                    user_name: "张三",
                    add_time: Date.now(),
                    comment: "add"
                };
                this.list.push(obj);
            }
        }
    }
</script>

<style scoped>
    .comment_container {
        padding: 20px 30px;
    }
</style>